<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凡客VANCL-互联网快时尚品牌,服装,鞋,配饰,网上购物货到付款网站,7天无条件退货</title>
    <!-- 引入tittle中的开头的小图标,这种事在线的,本地的图标也事通过这种方法引入,但是对图标的路径和大小有要求,必须在根目录,40 X 40 ？ -->
    <link rel="shortcut icon" href="http://i.vanclimg.com/common/favicon/favicon.ico" type="image/x-icon">
    <!-- 引入swiper轮播图css插件 -->
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <!-- 第三方的矢量图标 -->
    <!-- <a href="#" class="iconfont">&#xe60e;</a> -->
    <link rel="stylesheet" href="/libs/font/iconfont.css">
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <!-- 头部 -->
    <!-- 使用模块化引入,但是这里需要给header留地方他才可以显示出来 -->
    <header></header>


    <!-- 轮播图 -->
    <!-- 这里最好再重新给父元素设置class名以防一个页面中多个轮播互相影响 -->
    <!-- 使用方法: https://www.swiper.com.cn/api/index.html -->
    <div class="swiper-container lunbo">
        <div class="swiper-wrapper">
            <!-- 需要轮播多少张图就,创建多少个swiper-slide div -->
            <div class="swiper-slide">
                <img src="/images/index/0.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/index/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/index/2.jpg" alt="">
            </div><div class="swiper-slide">
                <img src="/images/index/0.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/index/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="/images/index/2.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>


    <!-- 立即充值 -->
    <div id="Recharge">
        <img src="/images/index/1581604905.jpg" alt="">
        <!-- 立即充值和获奖名单,链接,脱离文档流,定位到图片上,然后透明度为0,点击那个跳转到哪个链接地址 -->
        <div><a href="#"></a></div>
        <div><a href="#"></a></div>
    </div>

    <!-- 限时秒杀 -->
    <div id="Seckill">
        <a href="#">
            <img src="/images/index/1581604906.jpg" alt="">
            <!-- 到计时 -->
            <div>
                <span>限时秒杀中,距离结束还有</span>
                <span id="H">1</span>
                <span id="M">30</span>
                <span id="S">12</span>
            </div>
        </a>
    </div>

    <!-- 秒杀商品 -->
    <!-- 先布局后期用假数据接口使用模板引擎布局 -->
    <div id="SeckillProducts">
    <!--
        <a href="/html/details.html?id={{item.id}}">
            <img src="/images/index/T.jpg" alt="">
            <br>
            <span>凡客T恤 复刻 德田 有希 1 男款黑色</span>
            <br>
            <span>￥148</span>
            <br>
            <span>￥18</span>
            <span>充值后<span>9</span>元</span>
        </a>
        <a href="/html/details.html?id={{item.id}}">
            <img src="/images/index/T.jpg" alt="">
            <br>
            <span>凡客T恤 复刻 德田 有希 1 男款黑色</span>
            <br>
            <span>￥148</span>
            <br>
            <span>￥18</span>
            <span>充值后<span>9</span>元</span>
        </a>
        <a href="/html/details.html?id={{item.id}}">
            <img src="/images/index/T.jpg" alt="">
            <br>
            <span>凡客T恤 复刻 德田 有希 1 男款黑色</span>
            <br>
            <span>￥148</span>
            <br>
            <span>￥18</span>
            <span>充值后<span>9</span>元</span>
        </a>
        <a href="/html/details.html?id={{item.id}}">
            <img src="/images/index/T.jpg" alt="">
            <br>
            <span>凡客T恤 复刻 德田 有希 1 男款黑色</span>
            <br>
            <span>￥148</span>
            <br>
            <span>￥18</span>
            <span>充值后<span>9</span>元</span>
        </a>
        <a href="/html/details.html?id={{item.id}}">
            <img src="/images/index/T.jpg" alt="">
            <br>
            <span>凡客T恤 复刻 德田 有希 1 男款黑色</span>
            <br>
            <span>￥148</span>
            <br>
            <span>￥18</span>
            <span>充值后<span>9</span>元</span>
        </a>
    -->
        
    </div>
    <!-- 使用模板布局 -->
        <!-- 注意这个SeckillProducts是js通过template传过来的参（即是is中的 const html = template('Template_01', { SeckillProducts : SeckillProducts} 中的冒号前边的这个SeckillProducts)）,后边的item和index都是自定义的,用来接收js中的元素和下标的 -->
    <script type="text/html" id="Template_01">
        {{each SeckillProducts item,index}}
            <a href="/html/details.html?id={{item.id}}">
                <img src="{{item.img}}" alt="">
                <br>
                <span>{{item.tittle}}</span>
                <br>
                <span>￥{{item.OriginalPrice}}</span>
                <br>
                <span>￥{{item.PresentPrice}}</span>
                <span>充值后<span>￥{{item.RechargePrice}}</span>元</span>
            </a>
        {{/each}}
    </script>

    <!-- 情人节精选 -->
    <div id="Lover">
        <img src="/images/index/1581759553.jpg" alt="">
        <div>
            <img src="/images/index/1581759555.jpg" alt="">
            <img src="/images/index/1581759556.jpg" alt="">
        </div>
    </div>


    <!-- 推荐商品 -->
    <div id="commodity">
        <!-- 一行三个- -->
        <div id="OneLineShree">
        <!-- 
            <a href="/html/details.html?id={{item.id}}"><img src="/images/index/1581759558.jpg" alt=""></a>
            <a href="/html/details.html?id={{item.id}}"><img src="/images/index/1581759559.jpg" alt=""></a>
            <a href="/html/details.html?id={{item.id}}"><img src="/images/index/1581759560.jpg" alt=""></a>
            <a href="/html/details.html?id={{item.id}}"><img src="/images/index/1581759558.jpg" alt=""></a>
            <a href="/html/details.html?id={{item.id}}"><img src="/images/index/1581759559.jpg" alt=""></a>
            <a href="/html/details.html?id={{item.id}}"><img src="/images/index/1581759560.jpg" alt=""></a>

            以上是静态死页面,以下就不保留静态页面了,用模板后可实现从服务器上传图片动态更新,因为现在没有后端我们可以使用假数据接口,或者本地json来实现
        -->
        </div>
        <!-- 一行三个模板 -->
        <script type="text/html" id="Template_02"> 
            {{each OneLineShree item,index}}
                <a href="/html/details.html?id={{item.id}}"><img src="{{item.img}}" alt=""></a>
            {{/each}}
        </script>

        <!-- 一行四个01 -->
        <div id="OneLineFore_01"></div>

        <!-- 一行四个01模板 -->
        <script type="text/html" id="Template_03">
            {{each OneLineFore_01 item,index}}
                <a href="/html/details.html?id={{item.id}}"><img src="{{item.img}}" alt=""></a>
            {{/each}}
        </script>

        <!-- 中间标题 -->
        <img src="/images/index/nhtt_22g.jpg" alt="">

        <!-- 一行四个02 -->
        <div id="OneLineFore_02"></div>
        <!-- 一行四个02模板 -->
        <script type="text/html" id="Template_04">
            {{each OneLineFore_02 item,index}}
                <a href="/html/details.html?id={{item.id}}"><img src="{{item.img}}" alt=""></a>
            {{/each}}
        </script>
    </div>

    <!-- 优质推荐 -->
    <div id="Recommend">
        <p id="ex">优质推荐</p>
        <ul>
            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/pc05.jpg" alt="">
                    <p>4.0日式免烫衬衫
                        <span>充值购买更优惠</span>
                    </p>
                </a>
            </li>
            <li>
                <div>
                    <a href="/html/details.html?id={{item.id}}">
                        <img src="/images/index/pc06.jpg" alt="">
                        <p>法兰绒衬衫
                            <span>充值购买相当于99元起</span>
                        </p>
                    </a>
                </div>
                <div>
                    <a href="/html/details.html?id={{item.id}}">
                        <img src="/images/index/pc07.jpg" alt="">
                        <p>卫衣
                            <span>充值购买相当于79元起</span>
                        </p>
                    </a>
                </div>
            </li>
            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/pc08.jpg" alt="">
                    <p>秋冬新品
                        <span>1件8折2件7折</span>
                    </p>
                </a>
                
            </li>
        </ul>
        <ul>
            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/pc05.jpg" alt="">
                    <p>4.0日式免烫衬衫
                        <span>充值购买更优惠</span>
                    </p>
                </a>
            </li>
            <li>
                <div>
                    <a href="/html/details.html?id={{item.id}}">
                        <img src="/images/index/pc06.jpg" alt="">
                        <p>法兰绒衬衫
                            <span>充值购买相当于99元起</span>
                        </p>
                    </a>
                </div>
                <div>
                    <a href="/html/details.html?id={{item.id}}">
                        <img src="/images/index/pc07.jpg" alt="">
                        <p>卫衣
                            <span>充值购买相当于79元起</span>
                        </p>
                    </a>
                </div>
            </li>
            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/pc08.jpg" alt="">
                    <p>秋冬新品
                        <span>1件8折2件7折</span>
                    </p>
                </a>
        
            </li>
        </ul>
    </div>

    <!-- 下装推荐 -->
    <div id="Bottling">
        <p>下装推荐</p>
        <div>
            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/1581759599.jpg" alt="">
                </a>
                <p>
                    <span>重水洗锥形窄脚</span>
                    <span>充值购买相当于129元</span>
                </p>
            </li>

            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/1581759599.jpg" alt="">
                </a>
                <p>
                    <span>重水洗锥形窄脚</span>
                    <span>充值购买相当于129元</span>
                </p>
            </li>

            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/1581759599.jpg" alt="">
                </a>
                <p>
                    <span>重水洗锥形窄脚</span>
                    <span>充值购买相当于129元</span>
                </p>
            </li>

            <li>
                <a href="/html/details.html?id={{item.id}}">
                    <img src="/images/index/1581759599.jpg" alt="">
                </a>
                <p>
                    <span>重水洗锥形窄脚</span>
                    <span>充值购买相当于129元</span>
                </p>
            </li>
        </div>
    </div>

    <!-- 更多精品 -->
    <div id="More">
        <p>更多精品</p>
        <div>
            <img src="/images/index/1581759601.jpg" alt="">
            <img src="/images/index/1581759601.jpg" alt="">
            <img src="/images/index/1581759601.jpg" alt="">
        </div>
        <div>
            <img src="/images/index/1581759601.jpg" alt="">
            <img src="/images/index/1581759601.jpg" alt="">
            <img src="/images/index/1581759601.jpg" alt="">
        </div>
    </div>



    <!-- footer -->
    <footer>
       
    </footer>

    <!-- 引入模块化js文件 ,src中是要引入的模块化所依赖的文件,data-main中写模块(然后把所有要引入的js全都引入道index.js 这个模块中,最后就能整体全都引入到页面中了)-->
    <script src="/libs/require/require.min.js" data-main="/js/index"></script>
</body>
</html>